<template>
	<view class="robotMessage">
		<commonNavBar title="热门信息内容" :showSearch="false" :showQuerySearch="false"    ></commonNavBar>  
		 <view class="hot-message-item">
			 <view class="hot-message-item-subheading"> 
				<text  class="hot-message-item-subheading-tx" >违法行为</text>
			 </view>
			 <text  class="hot-message-item-content">
				 {{caseInfo != null ? caseInfo.offence : ''}}
			 </text>
		 </view>
		 <view class="hot-message-item">
			 <view class="hot-message-item-subheading"> 
				<text  class="hot-message-item-subheading-tx" >违法条款</text>
			 </view>
			 <text  class="hot-message-item-content"> {{caseInfo != null ? caseInfo.violationTerms : ''}}</text>
			 <text  class="hot-message-item-content"> {{caseInfo != null ? caseInfo.violationTermsArticle : ''}}</text>
			 <text  class="hot-message-item-content"> {{caseInfo != null ? caseInfo.violationTermsConditions : ''}}</text>
		 </view>
		 <view class="hot-message-item">
			 <view class="hot-message-item-subheading"> 
				<text  class="hot-message-item-subheading-tx" >处罚条款</text>
			 </view>
			 <text  class="hot-message-item-content"> {{caseInfo != null ? caseInfo.punishTerms : ''}}</text>
			 <text  class="hot-message-item-content"> {{caseInfo != null ? caseInfo.punishTermsArticle : ''}}</text>
			 <text  class="hot-message-item-content"> {{caseInfo != null ? caseInfo.punishTermsConditions : ''}}</text>
		 </view>
		 <view class="hot-message-item">
			 <view class="hot-message-item-subheading"> 
				<text  class="hot-message-item-subheading-tx" >处罚内容</text>
			 </view>
			 <text  class="hot-message-item-content">
				 {{caseInfo != null ? caseInfo.penalties : ''}}
			 </text>
		 </view>
		 <view class="hot-message-item">
			 <view class="hot-message-item-subheading"> 
				<text  class="hot-message-item-subheading-tx" >改正要求</text>
			 </view>
			 <text  class="hot-message-item-content">
				 {{caseInfo != null ? caseInfo.amendmentRequest : ''}} 
			 </text>
		 </view>
		 <view class="hot-message-item" style="padding-bottom: 40rpx;">
			 <view class="hot-message-item-subheading"> 
				<text  class="hot-message-item-subheading-tx" >已处罚案例</text>
			 </view>
			 <view class="hot-message-item-icon-box" @tap="showCaseImage(caseInfo != null ? caseInfo.penaltyCasesPic : '')">
				 <image class="hot-message-item-icon" src="/static/img/document.png"></image>
				 <text class="hot-message-item-icon-tx">点击查看案例处罚决定书</text>
			 </view>
		 </view>
	</view>
</template>

<script>
	import commonNavBar from '@/components/CommonNavBar.vue';
	export default {
		components: { 
			commonNavBar,
		},
		data() {
			return {
				caseInfo:{}
			}
		},	
		onLoad(details) {
			const that = this; 
			const eventChannel = this.getOpenerEventChannel();  
			eventChannel.on('updatePageData', function(data) {
				that.caseInfo = data.caseContent 
			})
		}, 
		methods: {
			showCaseImage(casePic){//查看热门消息点击案例之后显示图片信息
				uni.navigateTo({
					url: '/pages/robot/hotMessageCaseImage?picUrl='+casePic
				})
			},
		}
	}
</script>

<style  lang="scss">
	.robotMessage{
		background: #F9F9F9;
		height: calc(100vh - 195rpx);
		width: 750rpx; 
	}
	
	.hot-message-item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 10rpx;
		width: 735rpx;
	 }
	 .hot-message-item-subheading{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		background-image:linear-gradient(to right,#CF0303,#ffffff);
		padding: 10rpx;
		width: 710rpx;
		border-radius: 10rpx;
	 }
	 .hot-message-item-subheading-tx{
		 font-size: 23rpx;
		 font-weight: 700;
		 color: #fff;
	 }
	 .hot-message-item-content{
		 font-size: 20rpx;
		 color: #8f8f8f;
		 padding: 10rpx; 
	 }
	 .hot-message-item-icon-box{ 
		 padding: 10rpx 20rpx;
		 display: flex;
		 flex-direction: row;
		 justify-content: flex-start;
		 align-content: center;
		 width: 680rpx;
		 background-color: #d7d9df;
		 border-radius: 10rpx;
		 margin-top: 10rpx;
		 
		 
		 .hot-message-item-icon{
			 width: 30rpx;
			 height: 30rpx;
		 }
		 
		 .hot-message-item-icon-tx{
			font-size: 20rpx;
			color: #505050;
			line-height: 30rpx;
			margin-left: 10rpx;
		 }
	 }
</style>
